<template>
  <view class="announcement-overlay" v-if="visible">
    <view class="announcement-container">
      <!-- 背景图片 -->
      <image class="announcement-bg" :src="backgroundImageUrl" mode="aspectFit"></image>
      
      <!-- 公告标题 -->
      <view class="announcement-title">
        <text>平台公告</text>
      </view>
      
      <!-- 公告内容 -->
      <view class="announcement-content">
        <text class="content-header">内容如下：</text>
        <view class="content-list">
          <view class="content-item" v-for="(item, index) in announcements" :key="index">
            <text class="item-number">{{ index + 1 }}.</text>
            <text class="item-text">{{ item }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 关闭按钮 -->
    <view class="close-button" @click="closeAnnouncement">
        <image class="close-icon" :src="closeIconUrl" mode="aspectFit"></image>
    </view>
  </view>
</template>

<script>
import { getImageUrl } from '@/config/api.js'

export default {
  name: 'PlatformAnnouncement',
  props: {
    // 公告内容数组
    announcements: {
      type: Array,
      default: () => [
        '部分已支持云闪付平台',
        '优化分享体验试试把喜欢的内容分享出去吧！',
        '部分已支持云闪付平台',
        '优化分享体验试试把喜欢的内容分享出去吧！',
        '优化分享体验试试把喜欢的内容分享出去吧！',
        '优化分享体验试试把喜欢的内容分享出去吧！'
      ]
    },
    // 是否自动关闭
    autoClose: {
      type: Boolean,
      default: false
    },
    // 自动关闭时间（毫秒）
    autoCloseTime: {
      type: Number,
      default: 5000
    }
  },
  data() {
    return {
      visible: false
    };
  },
  computed: {
    // 背景图片URL
    backgroundImageUrl() {
      return getImageUrl('/static/Images/common/Gonggao.png')
    },
    // 关闭按钮图片URL
    closeIconUrl() {
      return getImageUrl('/static/Images/common/Guanbihui.png')
    }
  },
  mounted() {
    // 检查本次会话是否已经显示过公告
    let hasShownAnnouncement = false;
    try {
      // 使用uni-app的存储API，兼容小程序环境
      hasShownAnnouncement = uni.getStorageSync('platform_announcement_shown');
    } catch (e) {
      console.log('获取存储失败:', e);
    }
    
    if (!hasShownAnnouncement) {
      this.visible = true;
      // 标记本次会话已显示过公告
      try {
        uni.setStorageSync('platform_announcement_shown', true);
      } catch (e) {
        console.log('设置存储失败:', e);
      }
    }
    
    if (this.autoClose && this.visible) {
      setTimeout(() => {
        this.closeAnnouncement();
      }, this.autoCloseTime);
    }
  },
  methods: {
    closeAnnouncement() {
      this.visible = false;
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.announcement-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.announcement-container {
  position: relative;
  width: 80%;
  max-width: 600rpx;
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30rpx;
}

.announcement-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.announcement-bell {
  position: absolute;
  top: -40rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 80rpx;
  background-color: #FF5151;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bell-image {
  width: 40rpx;
  height: 40rpx;
}

.announcement-title {
  margin-top: 5rem;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.announcement-content {
  width: 100%;
  padding: 0 40rpx;
  box-sizing: border-box;
}

.content-header {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.content-list {
  width: 100%;
}

.content-item {
  display: flex;
  margin-bottom: 15rpx;
  align-items: flex-start;
}

.item-number {
  color: #FF9500;
  font-size: 26rpx;
  margin-right: 10rpx;
  font-weight: bold;
}

.item-text {
  font-size: 26rpx;
  color: #666;
  flex: 1;
  line-height: 1.4;
}

.close-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 27rem;
}

.close-icon {
  width: 60rpx;
  height: 60rpx;
}
</style>